<template>
  <ContentBox has-corner class="public-construction">
    <ContentBoxTitle title="公共区域建设" />
    <div class="public-construction__content">
      <ValueText
        v-for="(item, index) of computedList"
        :class="'class-' + (index % 4)"
        :value="item.value"
        :text="item.text"
        :icon="item.icon"
        :key="index"
      />
    </div>
  </ContentBox>
</template>

<script>
import ContentBox from '@/components/ContentBox'
import ContentBoxTitle from '@/components/ContentBoxTitle'
import ValueText from '@/components/ValueText.vue'
import icon1 from '@/assets/icon-1.png'
import park from '@/assets/park.png'
import party from '@/assets/party.png'
import mall from '@/assets/mall.png'
import station from '@/assets/station.png'
import culture from '@/assets/culture.png'
import sport from '@/assets/sport.png'
export default {
  name: 'PublicConstruction',
  components: {
    ContentBox,
    ContentBoxTitle,
    ValueText
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      icon1,
      park,
      party,
      mall,
      station,
      culture,
      sport
    }
  },
  computed: {
    computedList () {
      return [{
        value: this.data.parkCount,
        text: '公园',
        icon: this.park
      }, {
        value: this.data.centerCount,
        text: '党员活动室',
        icon: this.party
      }, {
        value: this.data.mallCount,
        text: '商场',
        icon: this.mall
      }, {
        value: this.data.stationCount,
        text: '车站码头',
        icon: this.station
      }, {
        value: this.data.cultureCount,
        text: '文化宫',
        icon: this.culture
      }, {
        value: this.data.sportCount,
        text: '体育馆',
        icon: this.sport
      }/*,{
        value: this.data.marketCount,
        text: '集贸市场',
        icon: this.icon1
      }, {
        value: this.data.entertainmentCount,
        text: '游览场所',
        icon: this.icon1
      },*/]
    }
  }
}
</script>

<style lang="scss">
.public-construction {
  width: $base * 500px;
  height: $base * 230px;
  // margin-top: $base*10px;

  .content-box-title__content {
    width: $base * 300px;
  }
  .public-construction__content {
    display: flex;
    padding-top: $base * 29px;

    .value-text {
      flex: 1;
      font-size: $base * 30px;

      .value-text__text {
        flex-direction: column-reverse;
        // justify-content: center;
        // align-items: center;
        font-size: $base * 14px;
        margin-top: $base * 13px;
        height: $base * 66px;
        justify-content: flex-end;
        img {
          margin-right: 0;
          margin-top: $base * 8px;
          width: $base * 44px;
          height: $base * 38px;
        }
      }
    }
  }

  .class-0 {
    .value-text__value {
      color: $txt_c1;
    }
  }
  .class-1 {
    .value-text__value {
      color: $value_c;
    }
  }
  .class-2 {
    .value-text__value {
      color: $txt_c2;
    }
  }
  .class-3 {
    .value-text__value {
      color: $txt_c3;
    }
  }
}
</style>
